import { useState } from 'react'
import { Drawer, Button, ColorPicker } from '@arco-design/web-react'
import { generate, getRgbStr } from '@arco-design/color'
import { IconSettings } from '@arco-design/web-react/icon'
import React from 'react'
import useLocale from '@/hooks/useLocale'
import { debounce } from '@/utils/utils'
//ts防抖函数
interface SettingProps {
  trigger?: React.ReactElement
}

const Setting = (props: SettingProps) => {
  const [visible, setVisible] = useState(false)
  const { trigger } = props
  const t = useLocale()
  const debounceChange = debounce((newColor: string) => {
    const newList = generate(newColor, {
      list: true,
      dark: false
    })
    newList.forEach((_: string, index: number) => {
      document.body.style.setProperty(`--arcoblue-${index + 1}`, getRgbStr(_))
    })
  }, 300)
  const onChangeHandler = (color: string) => {
    debounceChange(color)
  }
  return (
    <div>
      <>
        {trigger ? (
          React.cloneElement(trigger, { onClick: () => setVisible(true) })
        ) : (
          <Button
            onClick={() => {
              setVisible(true)
            }}
            icon={<IconSettings />}
            shape="circle"
          />
        )}
      </>

      <Drawer
        width={332}
        title={
          <span>
            <IconSettings /> {t['settings.title']}
          </span>
        }
        visible={visible}
        onOk={() => {
          setVisible(false)
        }}
        onCancel={() => {
          setVisible(false)
        }}
      >
        <ColorPicker defaultValue={'#165DFF'} showText disabledAlpha onChange={onChangeHandler} />
      </Drawer>
    </div>
  )
}

export default Setting
